<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <hr>
    <!-- id name -->
    <p>id name</p>
    <form id="id_form" name="name_form">
        <button>commit</button>
    </form>

    <hr>
    <!-- action -->
    <p>action: missing</p>
    <form action="">
        <button>commit</button>
    </form>
    <p>action: url</p>
    <form action="http://www.baidu.com">
        <button>commit</button>
    </form>

    <hr>
    <!-- method -->
    <p>在“开发者工具”的“网络”中查询当前请求信息</p>
    <p>method: get</p>
    <form action="" method="get">
        username: <input type="text" name="username"> <br>
        password: <input type="password" name="password"> <br>
        <button>login</button>
    </form>
    <p>method: post</p>
    <form action="" method="post">
        username: <input type="text" name="username"> <br>
        password: <input type="password" name="password"> <br>
        <button>login</button>
    </form>

    <hr>
    <!-- autocomplete -->
    <p>autocomplete: on</p>
    <form action="" autocomplete="on">
        username: <input type="text" name="username"> <br>
        password: <input type="password" name="password"> <br>
        <button>login</button>
    </form>
    <p>autocomplete: off</p>
    <form action="" autocomplete="off">
        username: <input type="text" name="username"> <br>
        password: <input type="password" name="password"> <br>
        <button>login</button>
    </form>

    <hr>
    <!-- novalidate -->
    <p>novalidate</p>
    <form action="">
        username: <input type="text" name="username"> <br>
        password: <input type="password" name="password"> <br>
        tel: <input type="tel" name="tel"> <br>
        email: <input type="email" name="email"> <br>
        website: <input type="url" name="website"> <br>
        <button>register</button>
    </form>
    <form action="">
        username: <input type="text" name="username"> <br>
        password: <input type="password" name="password"> <br>
        tel: <input type="tel" name="tel"> <br>
        email: <input type="email" name="email"> <br>
        website: <input type="url" name="website"> <br>
        <button>register (novalidate)</button>
    </form>

    <hr>
    <!-- target -->
    <p>target: _blank</p>
    <form action="https://www.baidu.com/s" target="_blank">
        wd: <input type="text" name="wd"> <br>
        <button>search</button>
    </form>
    <p>target: _self</p>
    <form action="https://www.baidu.com/s" target="_self">
        wd: <input type="text" name="wd"> <br>
        <button>search</button>
    </form>
    <p>target: form_name</p>
    <div style="clear: both;">
        <!-- 由于现代浏览器存在跨域限制，所以这里使用本地服务处理。 -->
        <form action="login.html" target="frame_display"
            style="float: left; position: relative; width: 50%; background-color: lightskyblue;">
            username: <input type="text" name="username"> <br>
            password: <input type="password" name="password"> <br>
            <button>login</button>
        </form>
        <iframe src="" frameborder="0" name="frame_display"
            style=" position: relative; width: 50%; background-color: slategrey;"></iframe>
    </div>


</body>

</html>

<!-- HTML表单指南 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms -->

<!-- 创建我的第一个表单 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Your_first_form -->


<!-- form -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form -->

<!-- name -->
<!-- 表单的名称。HTML 4中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。 -->

<!-- action -->
<!-- 处理表单提交的 URL。这个值可被 <button>、<input type="submit"> 或 <input type="image"> 元素上的 formaction 属性覆盖。 -->

<!-- method -->
<!-- 浏览器使用这种 HTTP 方式来提交 表单. 可能的值有： -->
<!-- post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器. -->
<!-- get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?' 作为分隔符，没有副作用 时使用这个方法。 -->
<!-- dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。 -->
<!-- 此值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formmethod 属性覆盖。 -->

<!-- autocomplete -->
<!-- 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。 可能的值有： -->
<!-- off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 自动填充属性和登录） -->
<!-- on：浏览器可自动补全条目 -->
<!-- Google Chrome 备注 -->
<!-- 对于自动完成的请求，Google Chrome UI 是不一样的，取决于在 input 元素及其表单上，autocomplete 是否设为 off 。特别是，如果表单的 autocomplete 设为 off ，并且它的输入元素的 autocomplete 字段没有设置，如果用户请求该输入元素的自动填充建议，Chrome 就可能展示一个消息，“自动完成已关闭”。另一方面，如果表单和输入元素的 autocomplete 都设为 off，浏览器就不会展示此消息。出于此原因，你应该将每个拥有自定义自动完成的输入元素的 autocomplete 设为 off 。 -->

<!-- novalidate -->
<!-- 此布尔值属性表示提交表单时不需要验证表单。 如果没有声明该属性 （因此表单需要通过验证）。该属性可以被表单中的 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formnovalidate 属性覆盖。 -->

<!-- target -->
<!-- 表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中, 这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： -->
<!-- _self：默认值。在相同浏览上下文中加载。 -->
<!-- _blank：在新的未命名的浏览上下文中加载。 -->
<!-- _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。 -->
<!-- _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。 -->
<!-- 此值可以被 <button>、 <input type="submit"> 或 <input type="image"> 元素中的 formtarget 属性覆盖。 -->